<template>
	<view class="ithui-content">
		<view class="ithui-view">
			<view class="view-info">
				<view class="userinfo">
					<view class="flex justify-end">
						<!-- <view class="arrow arrow-one" @click="showModal = true"><span>提现解释</span></view> -->
					</view>
				</view>
				<!-- <u-modal v-model="showModal" title="提现解释" confirmText="我已知晓">
					<view class="slot-content mx-32">
						<rich-text :nodes="content"></rich-text>
					</view>
				</u-modal> -->
				<view class="box">
					<view class="tx">
						<view class="tx-grid">
							<view class="tx-grid-text">
								<view class="title">可提现余额</view>
								<view class="money">
									<u-count-to :start-val="0" separator="," :decimals="2" bold :end-val="balance"></u-count-to>
									<text class="font-24" style="color: #333;">元</text>
								</view>
							</view>
						</view>
						<view class="tx-grid" @click="navTo('pages/withdraw/withdraw/withdraw')"><span
								class="tx-grid-comm-sign">立即提现</span></view>
					</view>
					<view class="palace palace-one">
						<view class="palace-grid">
							<view class="palace-grid-text">
								<view class="palace-grid-text-data">
									<text>{{ comingSoon }}</text>
									<text class="palace-grid-text-data-b">元</text>
								</view>
								<view class="palace-grid-text-name">即将到账</view>
							</view>
						</view>
						<view class="palace-grid">
							<view class="palace-grid-text">
								<view class="palace-grid-text-data">
									<text>{{ accumulated }}</text>
									<text class="palace-grid-text-data-b">元</text>
								</view>
								<view class="palace-grid-text-name">累计到账</view>
							</view>
						</view>
						<view class="palace-grid">
							<view class="palace-grid-text">
								<view class="palace-grid-text-data">
									<text>{{ withdrawalTotal }}</text>
									<text class="palace-grid-text-data-b">元</text>
								</view>
								<view class="palace-grid-text-name">累计提现</view>
							</view>
						</view>
					</view>
				</view>
				<view class="top">
					<u-subsection :list="tabs" :current="tabIndex" @change="changeTab"></u-subsection>
					<u-empty v-if="list.length === 0" style="margin-top: 40rpx;" mode="order" text="没有记录" iconSize="140"
						textSize="32">
					</u-empty>
				</view>
				<view class="list-view">
					<view class="list-item" v-for="(item, index) in list" :key="index" hover-class="hover"
						:hover-stay-time="150" bindtap="detail">
						<template v-if="tabIndex == 0 || tabIndex == 1 || tabIndex == 2">
							<view class="content-box">
								<view class="des-box">
									<view class="tit">
										{{ setType(item.type) }}
									</view>
									<view class="time">{{ item.executeTime }}</view>
								</view>
							</view>
							<view class="money">
								+{{ item.money }}
							</view>
						</template>
						<template v-else>
							<view class="content-box">
								<view class="des-box">
									<view class="tit">
										{{ setExamineState(item.examineState) }}
									</view>
									<view class="font-26 my-12">
										提现状态：{{ setState(item.state) }}
									</view>
									<view v-if="item.reason != null" class="source"
										:style="{ color: '#4caf50' }">
										{{item.reason}}
									</view>
									<view class="time">审核时间:{{ item.auditTime || '暂无' }}</view>
								</view>
							</view>
							<view class="money">
								+{{ item.total }}
							</view>
						</template>
					</view>
				</view>
				<view class="tip">仅显示近一年内的收支记录</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				is_withdraw: false,
				list: [],
				showModal: false,
				date: 'incomeMonth',
				content: `<p><em style="font-style:normal;color:#ff1e0f">可提现余额：</em>当前可以提现的金额</p>
				          <p><em style="font-style:normal;color:#ff1e0f">即将到账：</em>交易中的金额，交易成功后可提现</p>
				          <p><em style="font-style:normal;color:#ff1e0f">累计到账：</em>累计交易成功的金额</p>
				          <p><em style="font-style:normal;color:#ff1e0f">累计提现：</em>累计提现成功的金额</p>
				          <p><em style="font-style:normal;color:#ff1e0f">*注：所有金额币种均为人民币，单位为元，符号￥</em></p>
				         `,
				tabs: ['本月收入', '今日收入', '昨日收入', '提现记录'],
				tabIndex: 0,
				balance: 0,
				withdrawalTotal: 0, // 累计提现
				accumulated: 0, // 累计到账
				comingSoon: 0, // 即将到账
			}
		},
		onLoad() {
			this.tabIndex = 0;
		},
		onShow() {
			this.initData();
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			initData() {
				this.getShopComWithdrawalFlowRule();
				this.getFundList();
				this.getReceived();
			},
			// 获取可提现余额和累计提现
			async getShopComWithdrawalFlowRule(){
				const id = this.userInfo.id
				const data = await this.$u.api.getShopComWithdrawalFlowRule({id});
				this.balance = data.data.balance;
				this.withdrawalTotal = data.data.withdrawalTotal;
			},
			// 获取即将到账和累计到账
			async getReceived(){
				const id = this.userInfo.id
				const data = await this.$u.api.getReceived({id});
				this.accumulated = data.data.accumulated;
				this.comingSoon = data.data.comingSoon;
			},
			async getFundList() {
				// 此处去请求下方列表数据
				if(this.tabIndex != 3){
					this.$u.api.getIncome({
						id: this.userInfo.id,
						incomeType: this.tabIndex
					}).then(res=>{
						this.list = res.dataList;
					})
				}else{
					this.$u.api.getComWithdrawalFlow({
						type: 1,
						deliveryId: this.userInfo.id
					}).then(res=>{
						this.list = res.dataList;
					})
				}
				
			},
			changeTab(index) {
				this.tabIndex = index;
				// 用的同一个数组,请求数据的时候要先置空再去请求
				// this.list = []
				if (this.tabIndex == 0) {
					this.date = 'incomeMonth';
					this.is_withdraw = false;
				} else if (this.tabIndex == 1) {
					this.date = 'incomeToday';
					this.is_withdraw = false;
				} else if (this.tabIndex == 2) {
					this.date = 'incomeYesterday';
					this.is_withdraw = false;
				} else if (this.tabIndex == 3) {
					this.date = 'incomeList';
					this.is_withdraw = true;
				}
				uni.showLoading({
					title: '加载中'
				});
				this.getFundList();
				// 实际调用的时候去掉定时器，将uni.hideLoading()放在请求成功后
				setTimeout(() => {
					uni.hideLoading();
				}, 500);
			},
			navTo(url) {
				this.$ut.route(url,{balance:this.balance});
			},
			// 处理回显
			setType(type){
				let text = '';
				if(type == 0) text = '商品购买';
				if(type == 1) text = '充值储蓄';
				if(type == 2) text = '提现';
				if(type == 3) text = '分销商返利';
				if(type == 4) text = '注册分销商';
				if(type == 5) text = '推广储蓄返利';
				if(type == 6) text = '绑定手机号';
				return text
			},
			// 处理回显
			setExamineState(examineState){
				let text = '';
				if(examineState == 0) text = '未通过';
				if(examineState == 1) text = '已通过';
				if(examineState == 2) text = '审核中';
				return text
			},
			// 处理回显
			setState(state){
				let text = '';
				if(state == 0) text = '待处理';
				if(state == 1) text = '已提现';
				if(state == 2) text = '提现失败';
				return text
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中'
			});
			this.showModal = false
			this.initData();
			// 实际调用的时候去掉定时器，将uni.hideLoading()和uni.stopPullDownRefresh()放在请求成功后
			// stopPullDownRefresh是停止下拉刷新事件以及动画的,在请求返回后需要调用一下,否则将一直执行动画
			setTimeout(() => {
				uni.hideLoading();
			}, 500);
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	::v-deep .u-modal__content {
		justify-content: flex-start;
	}

	.flex {
		display: flex;
		align-items: center;
		padding: 50rpx;
		position: relative;

		&-one {
			flex: 1;
			min-width: 0;
			font-size: 26rpx;
			color: #333;

			&-text {
				margin: 10rpx 0;
				color: #f5f5f5;
				font-weight: normal;
			}
		}
	}


	.ithui {
		&-content {
			.h5title {
				width: 100%;
				height: 120rpx;
				text-align: center;
				line-height: 200rpx;
				color: white;
				font-size: 34rpx;
				font-weight: bold;
				background: linear-gradient(to right, #ff8440, #ff1e0f);
			}

			.list-view {
				position: relative;
				width: 100%;
				overflow: hidden;
			}

			.list-item {
				width: 100%;
				padding: 30rpx 28rpx;
				box-sizing: border-box;
				background: #fff;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				border-bottom: 1rpx solid #eaeef1;
			}

			.item-last::after {
				left: 0 !important;
			}

			.content-box {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
			}

			.des-box {
				min-height: 80rpx;
				padding-left: 28rpx;
				box-sizing: border-box;
				vertical-align: top;
				color: #333;
				font-size: 28rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.tit {
				font-size: 32rpx;
				max-width: 420rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.source {
				margin: 12rpx 0;
			}

			.time {
				color: #888;
				font-size: 24rpx;
			}

			.money {
				font-size: 38rpx;
				font-weight: 500;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding-left: 20rpx;
				color: #fd3a4c;
			}

			.less {
				color: #4caf50 !important;
			}

			.tip {
				margin-top: 50rpx;
				display: flex;
				justify-content: center;
				align-content: center;
				font-size: 24rpx;
				color: #888;
			}

		}

		&-view {
			width: 100%;
			height: 100%;
			margin: 0 auto;
			display: flex;
			flex-direction: column;

			.view-info {
				width: 100%;
				height: 100%;
				flex: 1;
				overflow-y: auto;
				overflow-x: hidden;
				position: relative;
				padding-bottom: 116rpx;

				.userinfo {
					background: linear-gradient(to right, #ff8440, #ff1e0f);
					background-color: #ff8440;
					padding-bottom: 100rpx;

					.arrow {
						position: relative;
						padding-right: 30rpx;

						span {
							font-size: 28rpx;
							color: white;
						}

						&:after {
							content: ' ';
							display: inline-block;
							height: 12rpx;
							width: 12rpx;
							border-width: 4rpx 4rpx 0 0;
							border-color: #848484;
							border-style: solid;
							transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
							position: relative;
							top: -4rpx;
							position: absolute;
							top: 50%;
							margin-top: -8rpx;
							right: 4rpx;
							border-radius: 2rpx;
						}
					}

					.arrow-one:after {
						border-color: white;
						margin-top: -6rpx;
					}
				}

				.box {
					width: 94%;
					background: white;
					border-radius: 10rpx;
					margin: -120rpx auto 20rpx;
					box-shadow: 0 6rpx 20rpx #e7e7e7;

					.tx {
						padding-top: 26rpx;
						overflow: hidden;
						display: flex;
						justify-content: space-between;
						align-content: center;

						&-grid {
							box-sizing: border-box;

							&:first-child {
								margin-left: 40rpx;
							}

							&-comm-sign {
								display: block;
								border-radius: 40rpx 0 0 40rpx;
								font-size: 26rpx;
								padding: 16rpx 44rpx;
								background: linear-gradient(to right, #fef082, #ffc551);
								background-color: #fef082;
								color: #cf4400;
							}

							&-text {
								display: block;
								color: #333;
								font-size: 26rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;

								.title {
									font-size: 32rpx;
									font-weight: normal;
								}

								.money {
									font-size: 60rpx;
									letter-spacing: 2rpx;
									margin-bottom: 10rpx;

									&-b {
										font-size: 28rpx;
									}
								}
							}
						}
					}

					.palace {
						padding-bottom: 20rpx;
						overflow: hidden;
						display: flex;
						justify-content: center;

						&-grid {
							flex: 1;
							position: relative;
							box-sizing: border-box;

							&:not(:last-child) {
								&:after {
									width: 1rpx;
									height: 80rpx;
									background: #fddece;
									content: ' ';
									display: inline-block;
									position: absolute;
									top: 0;
									right: 0;
								}
							}

							&-text {
								display: block;
								text-align: center;
								color: #333;
								font-size: 32rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;

								&-name {
									font-size: 26rpx;
									font-weight: normal;
									color: #ff4f23;
								}

								&-data {
									font-size: 32rpx;
									color: #ff4f23;
									letter-spacing: 2rpx;
									margin-bottom: 5rpx;

									&-b {
										font-size: 20rpx;
									}
								}
							}
						}
					}
				}
			}
		}

	}
</style>